/*
 *@description:首页页面
 *@Author:@reynold
 *@Date:2025-03-25 11:36:02
 *@Update:2025-03-25 11:36:02
 *@Version: V1.0.0
*/
<template>
  <div class="main_box">
    <!-- 轮播图 -->
    <div class="box_swipper">
      <div class="title">易洁家政系统</div>
      <div class="swiper">
        <van-swipe :autoplay="3000">
          <van-swipe-item @click="toSwipeItem(image)" v-for="image in images" :key="image.id">
            <img v-lazy="image.src" height="200px" width="100%" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <!-- 宫格导航 -->
    <div class="box_center">
      <van-grid :gutter="10" :border="false">
        <van-grid-item @click="toGridItem(item)" v-for="item in gridData" :key="item.id" :icon="item.icon" :text="item.name" />
      </van-grid>
    </div>
    <!-- 家政服务详情 -->
    <div class="box_detail">
      <van-row gutter="10">
        <van-col span="12" v-for="item in detailList" :key="item.id" @click="toDetail(item)">
          <detailItem :img-url="item.imgUrl" :name="item.name"></detailItem>
        </van-col>
      </van-row>
    </div>
    <!-- 家政服务详情弹出层 -->
    <van-popup v-model="show" closeable position="bottom" :style="{ height: '50%' }">
      <div class="van_title">{{ detailTemp.name }}详情</div>
      <div class="van_img">
        <img :src="detailTemp.imgUrl" alt="">
      </div>
      <div class="van_price">￥ {{ detailTemp.price }}</div>
      <div class="van_discrip"> 成交单数:{{ detailTemp.bookCount }}  预计等待时长: {{ detailTemp.duration }}</div>
    </van-popup>
  </div>
</template>
<script>
import {getCategories,getProducts} from '@/api/main.js'
import detailItem from '@/components/detailItem.vue';
import Vue from 'vue';
import { Lazyload } from 'vant';

Vue.use(Lazyload);
export default {
  data() {
    return {
      show:false,
      images: [
        {
          id: 1,
          src: 'https://image.chwlsq.com/764/info/6844581_2412190729183870473.jpg',
          path: '/detail'
        },
        {
          id: 2,
          src: "https://qcloud.dpfile.com/pc/bB2XiwZwBkPRyibAkKZ2XGh1YhReX6YXoE99OY78-yQSGGlMSSgiAwikSXh28Nhx.jpg",
          path: '/detail'
        },
        {
          id: 3,
          src: 'https://q6.itc.cn/images01/20240517/e88380720647419c882c7373ecd481d3.jpeg',
          path: '/detail'
        }
      ],
      gridData: [
        {
          id: 1,
          icon: 'hot-o',
          text: '家庭保洁'
        },
        {
          id: 2,
          icon: 'flower-o',
          text: '衣物护理'
        },
        {
          id: 3,
          icon: 'brush-o',
          text: '家具养护',
        },
        {
          id: 4,
          icon: 'tv-o',
          text: '家电清洗'
        }
      ],
      detailList: [
        { id: 1, imgUrl: "https://pic.rmb.bdstatic.com/bjh/down/8092ad7d3b581fefcfafd204f9257da6.jpeg", name: '电视维修', price: '150', path: "/detail", desciption: "对电视进行维修" },
        { id: 2, imgUrl: "https://pic.rmb.bdstatic.com/bjh/down/8092ad7d3b581fefcfafd204f9257da6.jpeg", name: '家电清洁', price: '120', path: "/detail", desciption: "对家电进行清洁...." },
      ],
      detailTemp:{}
    }
  },
  methods:{
    toDetail(item){
      this.show = true;
      this.detailTemp = item;
    },
    // 点击轮播图跳转
    toSwipeItem(image){
      console.log(image);
      this.$router.push(image.path+'/'+image.id)
    },
    // 点击宫格导航跳转
    toGridItem(item){
      this.$router.push('/account/'+item.id)
    },
    // 获取产品所有分类
    getCategorieList(){
      getCategories().then(res=>{
        this.gridData = res.data.data
      }).catch(err=>{
        console.log(err);
      })
    },
    // 获取所有产品
    getProductsList(){
      getProducts().then(res=>{
        this.detailList = res.data.data.list
      }).catch(err=>{
        console.log(err);
      })
    }
  },
  created(){
    this.getCategorieList()
    this.getProductsList()
  },
  components: {
    detailItem
  }
}
</script>
<style scoped>
.main_box {
  height: calc(100vh - 50px);
}
.box_swipper {
  width: 100%;
  height: 200px;
  background-image: linear-gradient(90deg, #ff5f6d, #ffc371);
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  position: relative;
}

.box_swipper .title {
  color: #fff;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
}
.box_swipper .swiper {
  width: 90%;
  position: absolute;
  top: 50px;
  left: 5%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.box_swipper .swiper .van-swipe,
.box_swipper .swiper .van-swipe image {
  border-radius: 10px;
}

.box_center {
  margin-top: 70px;
}

.box_detail {
  margin-top: 10px;
  padding: 0 10px;
}

/* 弹出层样式 */
.van_title,
.van_price {
  font-size: 20px;
  font-weight: 600;
  width: 100%;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin: 10px 0;
}
.van_img {
  height: 180px;
}
.van_img img {
  width: 100%;
  height: 100%;
}
.van_price {
  color: #ff5f6d;
  font-size: 18px;
}
.van_discrip,
.van_img {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}
</style>